<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手辅助问诊记录工具</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link href="https://fonts.googlefonts.cn/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .transcript-entry {
            transition: background-color 0.3s;
        }
        .transcript-entry.doctor {
            border-left: 4px solid #3b82f6;
        }
        .transcript-entry.patient {
            border-left: 4px solid #10b981;
        }
        .highlight {
            background-color: #fef3c7;
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .sidebar {
            transition: all 0.3s ease;
        }
        .sidebar.collapsed {
            width: 60px;
        }
        .sidebar.expanded {
            width: 250px;
        }
        .sidebar.collapsed .sidebar-text {
            display: none;
        }
        .sidebar.expanded .sidebar-text {
            display: inline;
        }
        .record-card {
            transition: all 0.3s ease;
        }
        .record-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div id="sidebar" class="sidebar expanded bg-gray-800 text-white flex flex-col h-full">
            <div class="p-4 flex items-center border-b border-gray-700">
                <i class="fas fa-heartbeat text-blue-400 text-xl"></i>
                <span class="sidebar-text ml-3 font-bold text-lg">AI问诊助手</span>
            </div>
            <div class="flex-1 overflow-y-auto py-4">
                <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
                    <i class="fas fa-microphone-alt mr-3"></i>
                    <span class="sidebar-text">实时转录</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
                    <i class="fas fa-file-medical mr-3"></i>
                    <span class="sidebar-text">问诊记录</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
                    <i class="fas fa-diagnoses mr-3"></i>
                    <span class="sidebar-text">诊断建议</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
                    <i class="fas fa-database mr-3"></i>
                    <span class="sidebar-text">知识库</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-700 hover:text-white">
                    <i class="fas fa-cog mr-3"></i>
                    <span class="sidebar-text">系统设置</span>
                </a>
            </div>
            <div class="p-4 border-t border-gray-700">
                <button id="toggle-sidebar" class="w-full flex items-center justify-center text-gray-400 hover:text-white">
                    <i class="fas fa-angle-double-left"></i>
                </button>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm">
                <div class="flex justify-between items-center px-6 py-3">
                    <div>
                        <h1 class="text-xl font-semibold text-gray-800">AI助手辅助问诊记录工具</h1>
                        <p class="text-sm text-gray-500">实时语音转文字 · 智能分析 · 自动生成问诊记录</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-plus mr-2"></i>新建问诊
                        </button>
                        <div class="relative">
                            <button class="text-gray-600 hover:text-gray-800">
                                <i class="fas fa-bell text-lg"></i>
                            </button>
                            <span class="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold">张</div>
                            <span class="ml-2 text-gray-700">张医生</span>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 主要内容 -->
            <main class="flex-1 overflow-y-auto p-6">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- 左侧：语音输入和实时转录 -->
                    <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
                        <div class="flex justify-between items-center mb-4">
                            <h2 class="text-xl font-semibold text-gray-800">实时语音转录</h2>
                            <div class="flex space-x-2">
                                <button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center pulse">
                                    <i class="fas fa-microphone mr-2"></i>开始录音
                                </button>
                                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
                                    <i class="fas fa-cog mr-2"></i>设置
                                </button>
                            </div>
                        </div>

                        <div class="bg-gray-100 rounded-lg p-4 h-96 overflow-y-auto mb-4" id="transcript-container">
                            <div class="transcript-entry doctor mb-3 p-3 rounded">
                                <div class="flex items-center mb-1">
                                    <span class="font-semibold text-blue-600">医生</span>
                                    <span class="text-xs text-gray-500 ml-2">10:30:05</span>
                                </div>
                                <p>您好，请问哪里不舒服？</p>
                            </div>
                            <div class="transcript-entry patient mb-3 p-3 rounded">
                                <div class="flex items-center mb-1">
                                    <span class="font-semibold text-green-600">患者</span>
                                    <span class="text-xs text-gray-500 ml-2">10:30:12</span>
                                </div>
                                <p>医生，我头痛三天了，越来越严重。</p>
                            </div>
                            <div class="transcript-entry doctor mb-3 p-3 rounded">
                                <div class="flex items-center mb-1">
                                    <span class="font-semibold text-blue-600">医生</span>
                                    <span class="text-xs text-gray-500 ml-2">10:30:20</span>
                                </div>
                                <p>头痛是哪种性质的？是胀痛还是刺痛？</p>
                            </div>
                            <div class="transcript-entry patient mb-3 p-3 rounded">
                                <div class="flex items-center mb-1">
                                    <span class="font-semibold text-green-600">患者</span>
                                    <span class="text-xs text-gray-500 ml-2">10:30:28</span>
                                </div>
                                <p>主要是胀痛，感觉头要炸了一样。</p>
                            </div>
                        </div>

                        <div class="flex justify-between items-center">
                            <div class="text-sm text-gray-500">
                                <span>识别准确率: 96.8%</span>
                            </div>
                            <div class="flex space-x-2">
                                <button class="text-gray-600 hover:text-gray-800">
                                    <i class="fas fa-pause"></i> 暂停
                                </button>
                                <button class="text-gray-600 hover:text-gray-800">
                                    <i class="fas fa-redo"></i> 重新开始
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧：分析结果和诊断建议 -->
                    <div class="space-y-6">
                        <!-- 关键信息提取 -->
                        <div class="bg-white rounded-xl shadow-md p-6">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">关键信息提取</h2>
                            <div class="space-y-3">
                                <div class="flex justify-between items-start">
                                    <span class="font-medium text-gray-700">主要症状</span>
                                    <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">头痛(3天)</span>
                                </div>
                                <div class="flex justify-between items-start">
                                    <span class="font-medium text-gray-700">疼痛性质</span>
                                    <span class="bg-green-100 text-green-800 px-2 py-1 rounded">胀痛</span>
                                </div>
                                <div class="flex justify-between items-start">
                                    <span class="font-medium text-gray-700">严重程度</span>
                                    <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">逐渐加重</span>
                                </div>
                                <div class="flex justify-between items-start">
                                    <span class="font-medium text-gray-700">相关症状</span>
                                    <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded">无</span>
                                </div>
                            </div>
                        </div>

                        <!-- 诊断建议 -->
                        <div class="bg-white rounded-xl shadow-md p-6">
                            <h2 class="text-xl font-semibold text-gray-800 mb-4">AI诊断建议</h2>
                            <div class="border-l-4 border-blue-500 pl-4 py-2 mb-3">
                                <h3 class="font-semibold text-gray-800">初步诊断</h3>
                                <p class="text-gray-600">偏头痛可能性较大 (置信度: 85%)</p>
                            </div>
                            <div class="border-l-4 border-green-500 pl-4 py-2 mb-3">
                                <h3 class="font-semibold text-gray-800">建议检查</h3>
                                <p class="text-gray-600">头颅CT，血常规</p>
                            </div>
                            <div class="border-l-4 border-yellow-500 pl-4 py-2">
                                <h3 class="font-semibold text-gray-800">处理建议</h3>
                                <p class="text-gray-600">可尝试布洛芬缓解疼痛，注意休息，避免强光刺激</p>
                            </div>
                            <div class="mt-4 pt-4 border-t border-gray-200">
                                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg">
                                    <i class="fas fa-file-medical mr-2"></i>生成完整问诊记录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 问诊记录预览 -->
                <div class="mt-6 bg-white rounded-xl shadow-md p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold text-gray-800">问诊记录预览</h2>
                        <div class="flex space-x-2">
                            <button class="text-gray-600 hover:text-gray-800">
                                <i class="fas fa-edit mr-1"></i>编辑
                            </button>
                            <button class="text-gray-600 hover:text-gray-800">
                                <i class="fas fa-download mr-1"></i>导出
                            </button>
                        </div>
                    </div>
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="grid grid-cols-3 gap-4 mb-4">
                            <div>
                                <p class="text-sm text-gray-500">姓名</p>
                                <p>张三</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">性别</p>
                                <p>男</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">年龄</p>
                                <p>35岁</p>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <h3 class="font-semibold text-gray-800 mb-2">主诉</h3>
                            <p>头痛三天，逐渐加重</p>
                        </div>
                        
                        <div class="mb-4">
                            <h3 class="font-semibold text-gray-800 mb-2">现病史</h3>
                            <p>患者三天前无明显诱因出现头痛，主要为胀痛，感觉头要炸了一样，症状逐渐加重，无其他伴随症状。</p>
                        </div>
                        
                        <div class="mb-4">
                            <h3 class="font-semibold text-gray-800 mb-2">初步诊断</h3>
                            <p>偏头痛可能性较大</p>
                        </div>
                        
                        <div>
                            <h3 class="font-semibold text-gray-800 mb-2">处理意见</h3>
                            <p>1. 可尝试布洛芬缓解疼痛<br>
                               2. 注意休息，避免强光刺激<br>
                               3. 建议完善头颅CT检查</p>
                        </div>
                    </div>
                </div>

                <!-- 统计图表 -->
                <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">问诊统计</h2>
                        <div id="consultation-chart" style="height: 300px;"></div>
                    </div>
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">诊断准确率</h2>
                        <div id="accuracy-chart" style="height: 300px;"></div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏切换功能
        document.getElementById('toggle-sidebar').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            if (sidebar.classList.contains('expanded')) {
                sidebar.classList.remove('expanded');
                sidebar.classList.add('collapsed');
                this.innerHTML = '<i class="fas fa-angle-double-right"></i>';
            } else {
                sidebar.classList.remove('collapsed');
                sidebar.classList.add('expanded');
                this.innerHTML = '<i class="fas fa-angle-double-left"></i>';
            }
        });

        // 录音按钮功能
        document.getElementById('record-btn').addEventListener('click', function() {
            const btn = this;
            if (btn.classList.contains('bg-red-500')) {
                btn.classList.remove('bg-red-500', 'hover:bg-red-600', 'pulse');
                btn.classList.add('bg-gray-500', 'hover:bg-gray-600');
                btn.innerHTML = '<i class="fas fa-microphone mr-2"></i>停止录音';
            } else {
                btn.classList.remove('bg-gray-500', 'hover:bg-gray-600');
                btn.classList.add('bg-red-500', 'hover:bg-red-600', 'pulse');
                btn.innerHTML = '<i class="fas fa-microphone mr-2"></i>开始录音';
            }
        });

        // 初始化图表
        window.onload = function() {
            // 问诊统计图表
            const consultationChart = echarts.init(document.getElementById('consultation-chart'));
            const consultationOption = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    bottom: '0%',
                    left: 'center'
                },
                series: [
                    {
                        name: '问诊类型',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 45, name: '内科' },
                            { value: 25, name: '外科' },
                            { value: 15, name: '儿科' },
                            { value: 10, name: '妇科' },
                            { value: 5, name: '其他' }
                        ]
                    }
                ]
            };
            consultationChart.setOption(consultationOption);

            // 诊断准确率图表
            const accuracyChart = echarts.init(document.getElementById('accuracy-chart'));
            const accuracyOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['偏头痛', '高血压', '糖尿病', '感冒', '胃炎'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '准确率(%)'
                    }
                ],
                series: [
                    {
                        name: '准确率',
                        type: 'bar',
                        barWidth: '60%',
                        data: [92, 88, 95, 85, 90],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#188df0' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#2378f7' },
                                    { offset: 0.7, color: '#2378f7' },
                                    { offset: 1, color: '#83bff6' }
                                ])
                            }
                        }
                    }
                ]
            };
            accuracyChart.setOption(accuracyOption);

            // 窗口大小调整时重置图表大小
            window.addEventListener('resize', function() {
                consultationChart.resize();
                accuracyChart.resize();
            });
        };
    </script>
</body>
</html>
